import React from 'react';
import {Card, message, Input, Button, Icon, Row, Col} from 'antd';
import './style.css';
import BraftEditor from 'braft-editor';
import 'braft-editor/dist/braft.css';
import r from '../../../../request';

class EditNote extends React.Component {

    state = {
        title: '',
        htmlContent: '',
        alertDisplay: 'none'
    };
    handleSubmit = () => {
        if(this.state.htmlContent === '' || this.state.title === ''){
            message.error('标题与内容不得为空！');
        }
        // TODO
    };
    handleInputChange = (e) => {
        const state = this.state;
        state[e.target.name] = e.target.value;
        this.setState(state);
    };

    componentDidMount(){
      console.log(this.props.match.params.noteId);
    }


    render() {
        const editorProps = {
            height: 500,
            initialContent: this.state.content,
            onHTMLChange: this.handleHTMLChange
        };
        return (
            <div>
                <Row className="editTitle">
                    <Col span={3} offset={3}>
                        {!!this.state.title ? <h1>{this.state.title}</h1> : <h1>Edit Notes</h1>}
                    </Col>
                </Row>
                <Row>
                    <Col span={18} offset={3}>
                        <Card className="noteInputCard"
                              title={
                                  <Input onChange={this.handleInputChange} style={{width: '100%'}} name='title'
                                         prefix={<Icon type="edit"/>} placeholder="标题"/>
                              }
                              actions={[
                                  <Button className="submitBtn"
                                          type="primary"
                                          onClick={this.handleSubmit}>
                                      提交
                                  </Button>
                              ]}>
                            <BraftEditor {...editorProps}/>
                        </Card>
                    </Col>
                </Row>
            </div>
        )
    }

    handleHTMLChange = (htmlContent) => {
        this.setState({htmlContent: htmlContent})
    }

}

export default EditNote;